<head><meta charset="UTF-8"><title>页面标题</title></head>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app">
    <br/>
    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>

    <el-table :data="tableData" height="450px" border style="width: 100%">
        <el-table-column prop="cid" label="商品编号" width="180"></el-table-column>
        <el-table-column prop="cname" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="bname" label="所属品牌名称" width="180"></el-table-column>
        <el-table-column label="操作" width="140">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="delTableById(scope.row)">删除</el-button>
                <el-button type="text" size="medium" @click="getUpdateData(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :page-sizes="[5, 8, 16, 32, 100]"
            :page-size="pageSize"
            :currentPage="currentPage"
            :total="totalRecord"  >
    </el-pagination>

    <el-dialog title="商品列表" :visible.sync="dialogFormVisible" width="500px" top="80px">
        <el-form label-width="80px" :model="form" >
            <el-form-item label="商品名称:" >
                <el-input v-model="form.cname"  autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form label-width="80px" :model="form" >
            <el-form-item label="所属品牌编号:" >
                <el-input v-model="form.bid"  autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="updateTableByIdOrAddTable" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: "#app",
            data:{
                labelPosition:"left",
                dialogFormVisible:false,
                tableData:[],
                currentPage:1,
                pageSize:5,
                totalRecord:0,
                form:{
                    cname: "",
                    bid: "",
                }
            },
            methods:{
                init:function (){
                    let that = this;
                    axios.get("/admin/comm/getComm?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (resp){
                        console.log(resp)
                        if(resp.data.code == 200){
                            //设置表格数据
                            that.tableData = resp.data.data.lists;
                            //设置总页数
                            that.totalRecord = resp.data.data.totalRecord;
                        }
                    });
                },
            handleSizeChange:function (val){
                this.pageSize = val;
                this.init();
            },
            handleCurrentChange:function (val){
                this.currentPage = val;
                //调用查询分页的方法
                this.init();
            },
            delTableById:function (scope){
                    console.log(scope)
                let cid = scope.cid;
                let that = this;
                if (window.confirm("是否确定删除？")){
                    axios.get("/admin/comm/delComm?cid="+cid).then(function (resp) {
                        if (resp.data.code == 200){
                            that.$message({
                                message: 'ok',
                                type: 'success'
                            });
                        }
                        that.init();
                    });
                }
            },
                updateTableByIdOrAddTable:function () {
                    let that = this;
                    let category = {cid:this.form.cid,cname: this.form.cname,bid:this.form.bid};
                    axios.post("/admin/comm/updateCommOrAdd", category).then(function (resp) {
                        if (resp.data.code == 200) {
                            that.$message({
                                message: 'ok',
                                type: 'success'
                            });
                        }
                        that.form.cid="";
                        that.form.cname="";
                        that.form.bid="";
                        that.dialogFormVisible = false
                        that.init();
                    });
                },
                cancel:function (){
                    let that = this;
                    that.form.cid="";
                    that.form.cname="";
                    that.form.bid="";
                    that.dialogFormVisible = false
                },
                getUpdateData:function (scope){
                    this.form.cid=scope.cid;
                    this.form.cname=scope.cname;
                    this.form.bid=scope.bid;
                    this.dialogFormVisible = true;
                },
            }
        });

        vm.init();
    }
</script>